<template>
  <div class="my_table flex_auto pdlr">
    <el-table
      ref="tableRef"
      :data="data"
      v-bind="$attrs"
      v-on="$listeners"
      height="100%"
      style="width: 100%"
      :header-cell-style="{
        'background-color': '#F0F0F0',
        color: '#333',
        'font-weight': 'normal',
      }"
    >
      <template v-for="(item, index) in column">
        <el-table-column
          v-if="item.slotScope"
          v-bind="item"
          :key="index"
          v-on="$listeners"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <slot :name="item.prop" v-bind="scope"></slot>
          </template>
        </el-table-column>
        <vColumn v-else v-bind="$attrs" :key="item.prop" :column="item" />
      </template>
    </el-table>
  </div>
</template>
<script>
import vColumn from "./column";

export default {
  name: "FreeTable",
  components: { vColumn },
  props: {
    data: Array,
    column: Array
  },
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.tableRef.doLayout();
    });
  },
  methods: {},
};
</script>